<template>
  <div class="v-lightbox-container" v-if="currentValue" :style="{ height: `${winH}px` }" @click="close">
    <input v-model="currentValue" class="hide" />
    <ul class="v-lightbox-wrapper">
      <li
        v-for="(img, index) in imgList"
        class="v-lightbox-imgWrapper"
        :style="{ webkitTransform: `translate3d(${winW * index}px, 0, 0)` }"
        @touchmove="moveHandler(index, $event)"
        @touchstart="startHandler"
        @touchend="endHandler"
        ref="lightboxItems"
        :key="img"
      >
        <img :src="img">
      </li>
    </ul>
    <ul class="v-lightbox-thumbnail">
      <li v-for="(img, index) in imgList" :key="img">
        <img
          :src="img"
          :class="{ active: currentIndex === index }"
          @click="thumbnailClickHandler(index, $event)"
        />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'lightbox',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    imgList: {
      type: Array,
      default: [],
    },
  },
  computed: {
    winW() {
      return window.innerWidth
    },
    winH() {
      return window.innerHeight
    },
  },
  data() {
    return {
      startX: 0,
      startTime: 0,
      offsetX: 0,
      currentIndex: 0,
      currentValue: this.value,
    }
  },
  watch: {
    value(val) {
      this.currentValue = val
    },
    currentValue(val) {
      this.$emit('input', val)
    },
  },
  methods: {
    close() {
      this.currentValue = false
    },
    thumbnailClickHandler(index, evt) {
      evt.stopPropagation()
      this.goIndex(index, true)
    },
    startHandler(evt) {
      this.startX = evt.touches[0].pageX
      this.offsetX = 0
      this.startTime = Date.now()
    },
    moveHandler(index, evt) {
      evt.preventDefault()
      this.offsetX = evt.targetTouches[0].pageX - this.startX
      const items = this.$refs.lightboxItems

      let i = this.currentIndex - 1
      const endIndex = i + 3

      for (i; i < endIndex; i += 1) {
        if (items[i]) {
          const translateX = ((i - this.currentIndex) * this.winW) + this.offsetX
          items[i].style.webkitTransition = '-webkit-transform 0s ease-out'
          items[i].style.webkitTransform = `translate3d(${translateX}px, 0, 0)`
        }
      }
    },
    endHandler(evt) {
      evt.preventDefault()
      const boundary = this.winW / 6
      const endTime = Date.now()

      /* eslint-disable no-lonely-if */
      if (endTime - this.startTime > 300) {
        if (this.offsetX >= boundary) {
          this.goIndex(-1)
        } else if (this.offsetX < 0 && this.offsetX < -boundary) {
          this.goIndex(1)
        } else {
          this.goIndex(0)
        }
      } else {
        // 快速移动也能使得翻页
        if (this.offsetX > 50) {
          this.goIndex(-1)
        } else if (this.offsetX < -50) {
          this.goIndex(1)
        } else {
          this.goIndex(0)
        }
      }
    },
    goIndex(n, redirect = false) {
      const len = this.imgList.length
      const items = this.$refs.lightboxItems
      const oldIndex = this.currentIndex
      let cidx

      if (redirect) {
        cidx = n
      } else {
        cidx = this.currentIndex + n
      }

      if (cidx > len - 1) {
        cidx = len - 1
      } else if (cidx < 0) {
        cidx = 0
      }
      // console.log('old', this.currentIndex, 'new', cidx)
      this.currentIndex = cidx

      if (redirect && oldIndex) {
        items[oldIndex].style.webkitTransform = `translate3d(${this.winW}px, 0, 0)`
        items[oldIndex].style.webkitTransition = '-webkit-transform 0.2s ease-out'
      }
      /* eslint-disable */
      //改变过渡的方式，从无动画变为有动画
      items[cidx].style.webkitTransition = '-webkit-transform 0.2s ease-out'
      items[cidx-1] && (items[cidx-1].style.webkitTransition = '-webkit-transform 0.2s ease-out')
      items[cidx+1] && (items[cidx+1].style.webkitTransition = '-webkit-transform 0.2s ease-out')

      //改变动画后所应该的位移值
      items[cidx].style.webkitTransform = 'translate3d(0, 0, 0)'
      items[cidx-1] && (items[cidx-1].style.webkitTransform = 'translate3d(-'+ this.winW +'px, 0, 0)')
      items[cidx+1] && (items[cidx+1].style.webkitTransform = 'translate3d('+ this.winW +'px, 0, 0)')
    },
  },
}
</script>

<style lang="scss">
.v-lightbox-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(15, 15, 15, .95);
  z-index: 3000;
  width: 100%;
  overflow: hidden;
}

.v-lightbox-wrapper {
  list-style: none;
  overflow: hidden;
  position: absolute;
  top: 50%;
  margin-top: -180px;
  width: 100%;
  height: 360px;
}

.v-lightbox-imgWrapper {
  width: 100%;
  position: absolute;
  top: 0;
  img {
    display: block;
    width: 100%;
    height: 360px;
  }
}

.v-lightbox-thumbnail {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  li {
    display: inline-block;
    margin-right: 10px;
  }
  img {
    width: 30px;
    height: 30px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.7);
    filter: opacity(60%);
    &.active {
      filter: opacity(100%);
    }
  }
}
</style>
